<template>
    <div>
        <!-- 表 -->
        <el-table :data="tableData" class="content" :cell-style="rowClass" :header-cell-style="headClass">
                <el-table-column label="序号" type="index" :index="indexMethod"></el-table-column>  
            <el-table-column prop="month" label="是否月租">
                <template slot-scope="scope">
                    {{scope.row.month==0 ?'是' : '否'}}
                </template>
            </el-table-column>
            <el-table-column prop="category" label="租赁类型">
                <template slot-scope="scope">
                    {{scope.row.category==0 ?'托盘' : scope.row.category==2 ? '立方' : '平方'}}
                </template>
            </el-table-column>
            <el-table-column prop="number" label="租赁数量"></el-table-column>
            <el-table-column prop="price" label="租赁单价"></el-table-column>  
            <el-table-column prop="start" label="租赁开始时间"></el-table-column>
            <el-table-column prop="end" label="租赁结束时间"></el-table-column>
            <el-table-column prop="isPay" label="是否已经付款">]
                <template slot-scope="scope">
                    {{scope.row.isPay==1 ?'已付款' : '未付款'}}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="250px">
                <template slot-scope="scope">
                    <el-button type="text" size="small" class="el-icon-edit" @click="determine(scope.row)">确认缴费</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination
                background
                style="float: right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNum"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {listRecord, Recordup} from '../../api/user.js'
export default {
    data(){
        return{
            adi:{
                isPay:''
            },
            // 数据
            tableData:[],
           // 分页
            page: {
                pageSize: 10,
                pageNum: 1
            },
            total: null,
        }
    },
    methods:{
// 表头显示
        Display() {
            this.Head = !this.Head;
        },
        // 表头样式设置
        headClass() {
            return 'text-align: center;background:#F8F8F9;color:#515A6D;';
        },
        // 表格样式设置
        rowClass() {
            return 'text-align: center;';
        },
        // 分页点击
        indexMethod(index) {
            return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
        },
        // 分页
        handleSizeChange(val) {
            this.page.pageSize = Number(val);
            console.log(`每页 ${val} 条`);
            this.Rean();
        },
        handleCurrentChange(val) {
            this.page.pageNum = Number(val);
            console.log(`当前页: ${val}`);
            this.Rean();
        },
        // 表格渲染
        Rean() {
            listRecord(this.page).then((a) => {
                this.tableData = a.rows;
                this.total=a.total
            });
        },
        determine(val){
            val.isPay=1
            Recordup(val).then((res)=>{
                console.log(res);
            })
        }
    },
    mounted(){
        this.Rean()
    }
}
</script>

<style scoped>

</style>